<template>
  <div class="m-add">
    <!-- 顶部导航 -->
    <div style="width: 1230px; margin: auto">
      <w-header></w-header> 
    </div>
    <!-- 主体 -->
    <div class="main-goods">
      <div class="m-goods-manage">
        <!-- logo -->
        <div class="logo" @click="$router.push('/')"></div>
        <!-- 主体 -->
        <div class="addContaint">
          <!-- 标题导航 -->
          <div class="titleNav">
            <span class="small active">商品添加</span>
            <span style="color: #ebebeb">|</span>
          </div>
          <w-panel-wrap>
            <w-panel>
                <div class="top">请选择添加类型</div>
                <div class="nav-list form-horizontal">
                  <div class=" col-sm-4" >
                    <div class="nav-item" @click="$router.push('/goods/classify')">
                      <div class="box">
                        <img src="../../assets/new/btn_hand.png" alt="">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4" @click="$router.push('/goods/eShopEnter')">
                    <div class="nav-item">
                    <div class="box">
                      <img src="../../assets/new/btn_e.png" alt="">
                    </div>
                    </div>
                  </div>
                  <div class="col-sm-4" @click="excelEnter">
                    <div class="nav-item">
                    <div class="box">
                      <img src="../../assets/new/btn_excel.png" alt="">
                    </div>
                    </div>
                  </div>
                </div>
            </w-panel>
          </w-panel-wrap>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { fileUploadUrl } from 'js/config'
  import app from '../../main'
  import { session } from 'js/util'

  export default {
    data() {
      return {
        userInfo: {
          userName: this.$route.query.userName,
          accessToken: this.$route.query.token,
          storeId: this.$route.query.storeId
        }
      }
    },
    created() {
      if (this.$route.query.addType == 2) {
        // 平台跳至商家后台的标志
        session.set('addType', this.$route.query.addType)
        this.$store.commit('updateUserInfo', this.userInfo)
      }
    },
    methods: {
      excelEnter() {
        this.$store.commit('clearAddGoodsInfo')
        this.createUploadForm()
      },
      // 创建form表单
      createUploadForm() {
        // 创建form表单
        const Forms = $(`<form action="${fileUploadUrl}" method="post" enctype="multipart/form-data"></form>`)
        const inputs = $(`<input type="file" name="filePath" />` +
                      `<input type="hidden" value=${this.$store.getters.storeId} name="storeId" />`)
        const FormInput = Forms.append(inputs)
        $('body').append(FormInput)
        inputs.click()
        this.uploadLocalImg(inputs, Forms)
      },
      // 图片上传
      uploadLocalImg(oInput, oForm) {
        const _this = this
        oInput.on('change', function (ev) {
          app.$spin.show()
          if (!/.XLS|.XLSX|.XLSM/i.test(ev.target.value)) {
            app.$toast('文档格式无效，请重新选择')
            return
          }
          oForm.ajaxSubmit(data => {
            app.$spin.hide()
            app.$toast(data.msg)
            if (data.code == 200) {
              app.$router.push('/goods/store')
            }
            oForm.remove()
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .m-add {
    // 顶部nav
    .m-app-header {
      position: relative;
    }
  }
  .m-panel-wrap {
    width: 1230px;
    margin-top: 0px!important;
    overflow: auto;
  }
</style>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .main-goods {
    width: 100%;
    background-color: $color-white;
  }
  .logo {
    width: 1230px;
    height: 50px;
    margin: 0 0 46px 20px;
    cursor: pointer;
    background: url('../../assets/new/logo.png') no-repeat;
  }
  .titleNav {
    border: 1px solid #ebebeb;
    border-bottom: none;
    width: 100%;
    height: 50px;
    background-color: #fafafb;
    vertical-align: middle;
    .small {
      line-height: 50px;
      width: 180px;
      display: inline-block;
      text-align: center;
      color: #686868
    }
    .active {
      border-top: 2px solid #f352aa;
    }
  }
  .m-goods-manage {
    width: 1230px;
    margin: auto;
    padding-top: 50px;
    .top {
      margin: 18px 0 48px 0;
      text-align: center;
      font-size: 20px;
      color: $color-dark;
    }
    .nav-list {
      height: 594px;
      .nav-item {
        width: 157px;
        text-align: center;
        padding-bottom: 11px;
        margin: auto;
        cursor: pointer;
        .box {
          display: table-cell;
          vertical-align: middle;
          height: 136px;
          width: 157px;
          img {
            height: 126px;
            width: 126px;
            margin: 0 auto;
          }
        }
        span {
          font-size: 24px;
          color: $color-white;          
        }
      }
    }
  }
</style>